// 该文件用于将自定义组件（CUSTOM_COMP）注册到低代码平台的设计器环境中，
// 包括行为（Behavior）、资源（Resource）、属性面板、事件、方法等设计时能力。

import CompUI from '../../runtime/src/index' // 组件实现
import Icon from './../../icon.svg?url' // 设计器图标
import { getDesignableUtil } from './utils' // 工具方法，获取设计器相关工具

// 解构出设计器相关工具和常量
const { createBehavior, createResource, GlobalRegistry, createFieldSchema, compName, IconName, compTitle } =
  getDesignableUtil()

const CUSTOM_COMP = CompUI // 组件本体

// 注册设计器图标
GlobalRegistry.registerDesignerIcons({ [IconName]: Icon })

// 注册组件的设计时行为（属性、事件、方法、国际化等）
CUSTOM_COMP.Behavior = createBehavior({
  name: compName, // 组件名（唯一标识）
  selector: (node: any) => {
    // 设计器中如何识别该组件
    // 只有 componentName 为 'Field' 且 x-component 属性等于 compName 的节点，才会被识别为本组件
    return node.componentName === 'Field' && node.props['x-component'] === compName
  },
  designerProps: {
    // 属性面板 schema 配置，决定设计器右侧属性面板的内容和结构
    propsSchema: createFieldSchema({
      // 属性分组：数据属性
      field: {
        dataProp: {
          type: 'void',
          'x-component': 'CollapseItem', // 折叠面板
          title: '数据属性',
          properties: {
            bindData: {
              type: 'array',
              'x-decorator': 'FormItem',
              'x-component': 'DataBound', // 自定义数据绑定组件
              'x-component-props': {
                showTypes: ['page', 'action'],
                expand: false
              }
            },
            text: {
              type: 'string',
              'x-decorator': 'BindDecorator',
              'x-component': 'Input' // 普通输入框
            }
          }
        }
      },
      // 事件分组
      event: {
        onClick: {
          'x-component': 'EventSetter', // 事件设置器
          title: '点击事件',
          'x-data': {
            payloads: [
              {
                name: 'value',
                alias: '事件值'
              }
            ]
          }
        }
      },
      // 方法分组
      method: {
        setText: {
          title: '测试' // 方法名和说明
        }
      }
    })
  },
  // 设计器属性面板国际化配置
  designerLocales: {
    'zh-CN': {
      title: compTitle, // 组件中文名
      settings: {
        'x-component-props': {
          bindData: '绑定值',
          text: '文本值'
        }
      }
    }
  }
})

// 注册组件的设计器资源（左侧物料面板可拖拽的元素）
CUSTOM_COMP.Resource = createResource('Displays', {
  icon: IconName, // 物料面板图标
  title: {
    'zh-CN': compTitle // 物料面板标题
  },
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'string',
        'x-component': compName
      }
    }
  ]
})

export default CUSTOM_COMP
